<template>
<div class="design-item-list" :class="{heightLight : current == goodlistForm.itemId}">
	<div class="design-title-wrap">
		<div class="designcard" v-if="goodlistForm.layout == 'card'">
			<div class="list" v-for="(carditem, cardinx) in selgoods" :key="cardinx">
				<div class="product-img" v-if="carditem.homePicture" :style="{backgroundImage: 'url(' + carditem.homePicture + ')'}"></div>
				<div class="product-img" v-else></div>
				<div class="product-info">
					<div class="product-info-box">
						<h3>{{ carditem.name || '此处显示商品名称'}}</h3>
						<div class="product-price">
							<span class="discount">￥{{carditem. currentPrice || 0.01}}</span>
							<span class="price">￥{{carditem. originalPrice || 0.01}}</span>
						</div>
					</div>
					<div class="product-buy"><span>立即购买</span></div>
				</div>
			</div>
			<div class="list" v-for="cardit in item" :key="cardit">
				<div class="product-img"></div>
				<div class="product-info">
					<div class="product-info-box">
						<h3>此处显示商品名称</h3>
						<div class="product-price">
							<span class="discount">￥0.01</span>
							<span class="price">￥0.01</span>
						</div>
					</div>
					<div class="product-buy"><span>立即购买</span></div>
				</div>
			</div>
		</div>
		<div class="designbig" v-if="goodlistForm.layout == 'big'">
			<div class="list" v-for="(bigitem, biginx) in selgoods" :key="biginx">
				<div class="product-img" v-if="bigitem.homePicture" :style="{backgroundImage: 'url(' + bigitem.homePicture + ')'}"></div>
				<div class="product-img" v-else></div>
				<div class="product-info">
					<div class="product-info-box">
						<h3>{{ bigitem.name || '此处显示商品名称'}}</h3>
						<div class="product-price">
							<span class="discount">￥{{bigitem. currentPrice || 0.01}}</span>
							<span class="price">￥{{bigitem. originalPrice || 0.01}}</span>
						</div>
					</div>
					<div class="product-buy"><span>立即购买</span></div>
				</div>
			</div>
			<div class="list" v-for="bigit in item" :key="bigit">
				<div class="product-img"></div>
				<div class="product-info">
					<div class="product-info-box">
						<h3>此处显示商品名称</h3>
						<div class="product-price">
							<span class="discount">￥0.01</span>
							<span class="price">￥0.01</span>
						</div>
					</div>
					<div class="product-buy"><span>立即购买</span></div>
				</div>
			</div>
		</div>
		<div class="designdouble" v-if="goodlistForm.layout == 'grid'">
			<div class="list" v-for="(griditem, gridinx) in selgoods" :key="gridinx">
				<div class="product-img" v-if="griditem.homePicture" :style="{backgroundImage: 'url(' + griditem.homePicture + ')'}"></div>
				<div class="product-img" v-else></div>
				<div class="product-info">
					<div class="product-info-box">
						<h3>{{ griditem.name || '此处显示商品名称'}}</h3>
						<div class="product-price">
							<span class="discount">￥{{griditem. currentPrice || 0.01}}</span>
							<span class="price">￥{{griditem. originalPrice || 0.01}}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="list" v-for="gridit in item" :key="gridit">
				<div class="product-img"></div>
				<div class="product-info">
					<div class="product-info-box">
						<h3>此处显示商品名称</h3>
						<div class="product-price">
							<span class="discount">￥0.01</span>
							<span class="price">￥0.01</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="design-edit" v-show="(current == goodlistForm.itemId) && goodlistForm.toolbarEdit && !goodlistForm.toolbarComponents">
		<h4 class="edit-title"><span>商品</span></h4>
		<el-form :model="goodlistForm" ref="titleForm" class="demo-ruleForm">
			<el-form-item label="列表样式">
				<el-radio-group v-model="goodlistForm.layout" @change="changeStatus(goodlistForm)">
					<el-radio label="card">单列样式</el-radio>
					<el-radio label="big">大图样式</el-radio>
					<el-radio label="grid">双列样式</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<!-- <form-add-goods :selgoods="selgoods" @childgoodsChange="goodsChange"></form-add-goods> -->
		<div is="FormAddGoods" :selgoods="selgoods" @childgoodsChange="goodsChange"></div>
	</div>
</div>
</template>

<script>
import FormAddGoods from './FormAddGoods'
import {filterID} from '@/tools/util'
export default {
	components: {
		FormAddGoods
	},
	name: 'formgoodlist',
	data(){
		return {
			form: JSON.parse(JSON.stringify(this.goodlistForm)), //深拷贝对象
			selgoods: this.goodlistForm.goodIds,
		}
	},
	props:{
		goodlistForm: {
			type: Object,
			default() {
				return {}
			}
		},
		current: String,
	},
	methods:{
		changeStatus(form){
			this.$emit("childChange",form);
			// console.log('子form',form);
		},
		async getItem(){//id
			if(!this.goodlistForm.goodIds.length) return ;
			let params = {
				start: 1,
				length: 20,
				key: "",
				firstIds: this.goodlistForm.goodIds,//置顶商品ID
				productIds: "",//展示商品ID
			}
			let res = await this.$store.dispatch("listGoods", params);
			this.selgoods = res.list;
			// let arr = this.goodlistForm.goodIds;
			// this.$store.commit('setgoodsList', arr);
			
		},
		goodsChange(arr){
			this.selgoods = arr;
			this.goodlistForm.goodIds = arr;
			this.$emit("childChange",this.goodlistForm);
		}
	},
	computed: {
		item(){
			switch(this.goodlistForm.layout){
				case "card": 
					if(!this.goodlistForm.goodIds.length){
						return 2
					}else if(this.goodlistForm.goodIds.length == 1){
						return 1
					}
					break;
				case "big": 
					if(!this.goodlistForm.goodIds.length){
						return 1
					}
					break;
				case "grid": 
					if(!this.goodlistForm.goodIds.length){
						return 2
					}else if(this.goodlistForm.goodIds.length == 1){
						return 1
					}
					break;
			}
		},
	},
	watch: {
		goodlistForm(val){
			this.selgoods = val.goodIds
		}
		
	}
}
</script>
<style lang="less" scoped>
@import "../../../../static/css/style.less";
</style>

